<template>
  <el-select
    ref="select"
    v-bind="$attrs"
    v-model="selectValue"
    class="role-employee-select"
    v-on="$listeners"
    popper-class="dep_select"
    clearable
    @change="selChange"
    @focus="showTree = true"
  >
    <div class="role-employee-select__body ">
      <div class="absolute_ipt">
        <el-input
          prefix-icon="el-icon-search"
          placeholder="输入搜索内容"
          :validate-event="false"
          v-model="filterText"
        >
        </el-input>
      </div>
      <el-tree
        ref="tree"
        :data="showDepData"
        node-key="deptId"
        highlight-current
        default-expand-all
        :filter-node-method="filterNode"
        @node-click="changeDepClick"
        :expand-on-click-node="false"
        v-if="showTree"
        style="padding-top:60px"
      >
        <flexbox
          slot-scope="{ node, data }"
          :class="{ 'is-current2': data.deptId == selectValue }"
          class="node-data"
        >
          <span class="node-data__mark" />
          <div class="node-data__label text-one-line">{{ node.label }}</div>
        </flexbox>
      </el-tree>
      <div class="hidden_option">
        <el-option
          v-for="item in groupList"
          :key="item.deptId"
          :label="item.name"
          :value="item.deptId"
          :disabled="true"
          style="padding: 0 10px; opacity: 0; height: 20px; overflow: hidden"
        />
      </div>
    </div>
  </el-select>
</template>

<script>
import { depListAPI } from "@/api/common"; // 获取部门接口
export default {
  // 部门选择器-单选
  name: "DepSelect",
  props: {
    props: {
      type: Object,
      default: () => {
        return {};
      },
    },
    value: [String, Number], //部门id
  },
  data() {
    return {
      filterText: "",
      showDepData: [],
      groupList: [],
      selectValue: "",
      showTree: true,
    };
  },
  watch: {
    filterText(val) {
      this.$refs.tree.filter(val);
    },
    value: {
      handler(val) {
        this.selectValue = val;
      },
      immediate: true,
    },
  },
  computed: {},
  created() {
    this.getDepTreeList();
  },
  methods: {
    selChange() {
      // 改清空selectValue时树还是选中的bug
      if (!this.selectValue) {
        this.showTree = false;
        this.showDepData = JSON.parse(JSON.stringify(this.showDepData));
      }
    },
    /**
     * 获取部门列表-tree
     */
    getDepTreeList() {
      depListAPI({ type: "tree" }).then((res) => {
        this.showDepData = res.data || [];
        this.groupList = this.treeListToList(
          JSON.parse(JSON.stringify(res.data))
        );
        this.$nextTick(() => {
          if (document.querySelector(".is-current2")) {
            console.log("执行这里--");
            document
              .querySelector(".is-current2")
              .parentNode.classList.add("is-current");
          }
        });
      });
    },
    // 树结构转普通list-step1
    treeListToList(treeList) {
      let list = [];
      this.handleTreeList(treeList, list);
      return list;
    },
    // 树结构转普通list-step2
    handleTreeList(treeList, list) {
      if (!treeList || !treeList.length) {
        return;
      }
      for (let i = 0; i < treeList.length; i++) {
        let currentRow = treeList[i];
        let newRow = JSON.parse(JSON.stringify(currentRow));
        newRow.children = undefined;
        list.push(newRow);
        this.handleTreeList(currentRow.children, list);
      }
    },
    selectChange(data) {
      this.$emit("change", data);
      this.$refs.select.blur();
    },
    // 节点点击 部门
    changeDepClick(data) {
      this.$nextTick(() => {
        if (document.querySelector(".is-current2")) {
          document
            .querySelector(".is-current2")
            .parentNode.classList.remove("is-current");
          this.selectChange(data);
        } else {
          this.selectChange(data);
        }
      });
    },
    // 树形 过滤
    filterNode(value, data) {
      if (!value) return true;
      return data.label.indexOf(value) !== -1;
    },
  },
};
</script>

<style lang="scss">
.el-tabs__header--hidden {
  .el-tabs__header {
    display: none;
  }
}
</style>

<style lang="scss" scoped>
.role-employee-select {
  position: relative;
  &__body {
    padding: 0 15px;
    width: 100%;
  }

  &__title {
    border-bottom: 1px solid #e4e7ed;
    padding: 0 0 7px;
    font-size: 12px;
    color: #909399;
    line-height: 30px;
  }

  .el-select-dropdown__item {
    padding: 0 10px;
  }
}

/deep/ .el-select-dropdown__item.selected::after {
  top: 0;
}

/deep/ .el-tabs {
  .el-tabs__nav-wrap::after {
    height: 1px;
  }

  .el-tab-pane {
    height: 100%;
    overflow-y: auto;
  }

  .el-tabs__content {
    height: 200px;
  }
}

.search-input {
  margin-bottom: 5px;
  /deep/ .el-input__inner {
    background-color: #f4f4f4;
    border: none;
  }
}

.cell {
  width: calc(100% - 30px);
  &__img {
    margin-right: 8px;
    vertical-align: middle;
    flex-shrink: 0;
  }
  &__body {
    flex-shrink: 0;
    flex: 1;
    margin-right: 30px;
  }
  &__footer {
    text-align: right;
  }
}
/deep/ .el-tree-node__content {
  border-left: 2px solid transparent;
}
// 切换选择项的时候
/deep/ .el-tree-node.is-current > .el-tree-node__content {
  background-color: #edf1fc;
  border-left: 2px solid #0066f9;
  color: #0066f9;
}
// 回显选择项的时候
/deep/ .el-tree-node .is-current.el-tree-node__content {
  background-color: #edf1fc;
  border-left: 2px solid #0066f9;
  color: #0066f9;
}
.role-employee-select__body {
  .hidden_option {
    position: absolute;
    left: 0;
    top: 70px;
    z-index: -1000;
    height: 0;
    /deep/ .el-select-dropdown__item {
      height: 40px !important;
    }
  }
}
.role-employee-select__body /deep/ .el-tree-node__content {
  height: 40px;
  font-size: 13px;
}
</style>
<style lang="scss">
// 修改部门选择器下拉高度
.dep_select {
  .el-select-dropdown__wrap {
    max-height: 500px !important;
    .el-input__inner {
      border: none !important;
      background: #f6f7fc !important;
    }
    .el-select-dropdown__list{
      padding: 0 !important
    }
  }
}
</style>
<style  lang="scss" scoped>
  .absolute_ipt{
    position: absolute;
    width: calc(100% - 30px);
    padding: 16px 0;
    background: #fff;
    z-index: 100
  }
</style>